<template>
  <div id="app">
    <keep-alive :include="cacheRoute">
      <router-view />
    </keep-alive>
    <van-tabbar route active-color="#224448" inactive-color="#2E2C2C">
      <van-tabbar-item replace placeholder :to="item.path" :url="item.url" v-for="(item, index) in tabbar" :key="index">
        <span>{{ item.name }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      tabbar: [
        {
          name: "通讯录",
          path: "/mail",
          active: require("@/assets/tab_active_1.png"),
          inactive: require("@/assets/tab_icon_1.png"),
        },
        {
          name: "信息中心",
          path: "/newInfo",
          active: require("@/assets/tab_active_3.png"),
          inactive: require("@/assets/tab_icon_3.png"),
        },
        {
          name: "发Lead",
          // path: "/activity",
          url: "https://leadshare.ihg.com",
          active: require("@/assets/tab_active_4-1.png"),
          inactive: require("@/assets/tab_icon_4-1.png"),
        },
        {
          name: "活动推广",
          path: "/newActivity",
          active: require("@/assets/tab_active_4.png"),
          inactive: require("@/assets/tab_icon_4.png"),
        },
        {
          name: "业绩报告",
          // path: "/report",
          url: "https://pedia.ihg.com.cn/leadshare/select",
          active: require("@/assets/tab_active_5.png"),
          inactive: require("@/assets/tab_icon_5.png"),
        },
      ],
      cacheRoute: ["mail", "mailDetail"],
    };
  },
  computed: {
    ...mapGetters(["tabType"]),
  },
};
</script>

<style lang="scss">
// #nprogress .bar {
//   background: red !important; //自定义颜色
// }
// .van-nav-bar .van-icon {
//   color: #666 !important;
// }

//最大宽度750px
@media (min-width: 750px) {
  #app {
    max-width: 750px;
    width: 750px;
    margin: 0 auto;
    height: 100vh;
  }

  .van-tabbar {
    width: 750px !important;
  }

  .van-tabbar--fixed {
    left: 50% !important;
    transform: translateX(-50%);
  }

  .van-tabbar-item__icon img {
    height: 25px !important;
  }

  .van-tabbar-item__text,
  .van-field__control,
  .van-button,
  .van-list__finished-text {
    font-size: 20px !important;
  }

  .van-popup--bottom {
    left: auto !important;
  }

  .van-popup {
    width: 750px;
    max-width: 750px;
    margin: 0 auto;

    .van-picker {
      .van-picker__toolbar {
        .van-picker__cancel,
        .van-picker__title,
        .van-picker__confirm {
          font-size: 20px !important;
        }
      }
    }
  }

  .van-picker-column__item {
    font-size: 20px !important;
  }
}
</style>
